<template>
    <div class="all">
        <div class="titleStyle">
            商品项信息
        </div>
        <div class="bodyStyle">
            <div style="width: 100%;">
                <el-form ref="addForm" :model="addForm" :rules="rules" label-width="80px" label-position="top">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="商品项序号" prop="serialNumber" class="formStyle">
                                <el-input placeholder=" " clearable v-model="addForm.serialNumber"
                                    size="mini"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="商品项货物件数" prop="packagesNumber" class="formStyle">
                                <el-input placeholder=" " clearable v-model="addForm.packagesNumber"
                                    size="mini"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="包装种类代码" prop="packageTypeCode" class="formStyle">
                                <el-input placeholder=" " clearable v-model="addForm.packageTypeCode"
                                    size="mini"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="危险品编号" prop="dangerousNumber" class="formStyle">
                                <el-input placeholder=" " clearable v-model="addForm.dangerousNumber"
                                    size="mini"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="海关税则编号" prop="customsTariffNumber" class="formStyle">
                                <el-input placeholder=" " clearable v-model="addForm.customsTariffNumber"
                                    size="mini"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="商品项货物毛重" prop="weightOfGoods" class="formStyle">
                                <el-input placeholder=" " clearable v-model="addForm.weightOfGoods"
                                    size="mini"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="唛头" prop="mark" class="formStyle">
                                <el-input placeholder=" " clearable v-model="addForm.mark" size="mini"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="集装箱(器)编号" prop="containerNumber" class="formStyle">
                                <el-select v-model="addForm.containerNumber" placeholder="请选择" clearable
                                    style="width: 100%;">
                                    <el-option label="重箱" value="重箱"></el-option>
                                    <el-option label="空箱" value="空箱"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="商品项简要描述" prop="itemDescription" class="formStyle">
                                <el-input placeholder=" " clearable v-model="addForm.itemDescription"
                                    style="width: 100%;" size="mini"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="备注" prop="remark" class="formStyle">
                                <el-input placeholder=" " clearable v-model="addForm.remark" style="width: 100%;"
                                    size="mini"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
        <div class="footerStyle">
            <!-- <el-button size="mini">取 消</el-button> -->
            <el-button type="primary" size="mini" class="buttonStyle" @click="onSubmit">保 存</el-button>
        </div>
    </div>
</template>
<script>
export default {
    components: {},
    props: {
        title: {
            type: String,
            default: ""
        },
        currentRow: {
            type: Object,
            default: {}
        },
        closePage: {
            type: Function,
        },
    },
    data() {
        return {
            addForm: {
                serialNumber: "",
                packagesNumber: "",
                packageTypeCode: "",
                dangerousNumber: "",
                customsTariffNumber: "",
                weightOfGoods: "",
                mark: "",
                containerNumber: "",
                itemDescription: "",
                remark: "",
            },
            rules: {
                serialNumber: [
                    { required: true, message: '请输入商品项序号', trigger: 'change,blur' },
                ],
                packagesNumber: [
                    { required: true, message: '请输入商品项货物件数', trigger: 'change,blur' },
                ],
                packageTypeCode: [
                    { required: true, message: '请输入包装种类代码', trigger: 'change,blur' },
                ],
                weightOfGoods: [
                    { required: true, message: '请输入商品项货物毛重', trigger: 'change,blur' },
                ],
                itemDescription: [
                    { required: true, message: '请输入商品项简要描述', trigger: 'change,blur' },
                ],
            },
        }
    },
    mounted() {
        if (this.title == '编辑') {
            this.addForm = { ...this.currentRow }
        }
    },
    methods: {
        onSubmit() {
            this.$refs.addForm.validate((valid) => {
                if (valid) {
                    let item = { ...this.addForm }
                    let type = this.title
                    this.closePage(type, item)
                } else {
                    console.log('error submit!!');
                    return false;
                }
            })
        },
    },
}
</script>
<style lang='less' scoped>
.all {
    .titleStyle {
        position: relative;
        top: -38px;
        font-size: 16px;
        color: #333333;
    }

    .bodyStyle {
        margin-top: -2%;

        .formStyle {
            // margin-right: 50px;
            width: 80%;

            /deep/ .el-input__inner {
                border-top: none;
                border-left: none;
                border-right: none;
                border-radius: 0;
                // padding: 0;
            }
        }

        .dateStyle {
            /deep/ .el-input__inner {
                border-top: none;
                border-left: none;
                border-right: none;
                border-radius: 0;
                width: 80%;
                height: 30px;
            }
        }

        /deep/ .el-form-item__label {
            color: #333333;
        }
    }

    .footerStyle {
        display: flex;
        justify-content: space-around;

        .buttonStyle {
            background-color: #0F47B8;
        }
    }
}
</style>